<template>
  <div>
    <van-form @submit="onSubmit">
      <van-cell-group class="select-group name-select-group">
        <div class="inputMask" @click="inputFoucs"></div>
        <p>企业名称</p>
        <el-select
          style="width:100%"
          class="searchBox"
          v-model="qyObj"
          filterable
          remote
          reserve-keyword
          value-key="id"
          placeholder="请输入关键词"
          @change="nameChange"
          :remote-method="nameEvent"
        >
          <el-option v-for="(item,index) in nameList" :key="index" :label="item.name" :value="item">
            <span style="float: left">{{ item.name }}</span>
          </el-option>
        </el-select>
      </van-cell-group>
      <van-field disabled v-model="form.enterpriseCode" label="企业信用代码" placeholder="企业信用代码" />
      <van-field disabled v-model="form.contacts" label="企业法人" placeholder="企业法人" />
      <van-field disabled :value="form.parkName" label="园区名称" placeholder="园区名称" />
      <van-field
        type="textarea"
        autosize
        label="企业注册地址"
         placeholder="企业注册地址"
        :value="form.registeredAddress"
        disabled
      />
      <van-field
        readonly
        clickable
        :value="questionTypeText"
        label="问题类型"
        placeholder="点击选择问题类型"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field v-model="problemLevel" label="问题级别" readonly />
      <van-field v-model="form.sbrName" label="填报人" readonly />
      <van-field
        v-model="form.content"
        rows="3"
        autosize
        label="问题描述"
        type="textarea"
        maxlength="500"
        show-word-limit
        :rules="[{ required: true, message: '请填写问题描述' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userData: {},
      qyObj: "",
      nameList: [],
      parkNameShowPicker: false,
      questionValue: "",
      questionTypeText: "",
      problemLevel: "",
      form: {
        enterpriseCode: "", //税号
        type: "", //问题类型
        typeName: "",
        problemLevel: "", //问题级别
        sbrName: "填报人",
        content: "",
        contacts:'',
        parkName:''
      },
      showPicker: false,
      columns: [],
      issueRankList:[]
    };
  },
  created() {
    this.userData = JSON.parse(sessionStorage.getItem("userData"));
    this.form.sbrName = this.userData.name;
    this.issueTypeEvent();
    this.issueRankEvent()
  },
  mounted(){
      document.querySelector(".el-input__inner").removeAttribute("readonly")
  },
  methods: {
    issueTypeEvent() {
      this.$api
        .dictionary(
          { method: "post", type: "getDictionaryByCode" },
          { code: "wtlx" }
        )
        .then((res) => {
          console.log("问题类型", res);
          // this.columns = res.data.data[0].children
          res.data.data[0].children.forEach((x) => {
            this.columns.push({ text: x.name, id: x.id,code:x.code });
          });
        });
    },
    issueRankEvent() {
      this.$api
        .dictionary(
          { method: "post", type: "getDictionaryByCode" },
          { code: "wtjb" }
        )
        .then((res) => {
          console.log("问题级别", res);
          this.issueRankList = res.data.data[0].children;
        });
    },
    nameEvent(query) {
      //关键字搜索
      console.log("query", query);
      if (query && query.length > 0) {
        this.$api
          .enterprise({ method: "post", type: "datagrid" }, { name: query,pageSize:20,pageNo:1 })
          .then((res) => {
            this.nameList = res.data.data;
          });
      } else {
        this.nameList = [];
      }
    },
    nameChange() {
      //确定
      console.log(this.qyObj);
      this.form.name = this.qyObj.name;
      this.form.enterpriseCode = this.qyObj.code;
      this.form.parkName = this.qyObj.basicName;
      this.form.registeredAddress = this.qyObj.register&&this.qyObj.register.physicalAddress;
      this.form.contacts = this.qyObj.contacts
      //nameEvent()
    },
    //   问题选择弹出框确定
    onConfirm(value) {
      console.log(value);
      this.form.typeName = value.text;
      this.form.type = value.code;
      this.questionTypeText = value.text;
      var level = value.code.split("-")[0]+'-'+value.code.split("-")[2]
      if (level == "wtlx-yj") {
        this.form.problemLevel = "wtjb-yj";
        this.problemLevel = "一级";
      } else if (level == "wtlx-ej") {
        this.form.problemLevel = "wtjb-ej";
        this.problemLevel = "二级";
      } else if (level == "wtlx-sj") {
        this.form.problemLevel = "wtjb-sj";
        this.problemLevel = "三级";
      }
      this.showPicker = false;
    },
    // 提交
    onSubmit() {
      this.$api
        .problemBase({ method: "post", type: "save" }, this.form)
        .then((res) => {
          if (res.data.isSuccess) {
            this.$toast.success("提交成功");
            this.form = {};
          }
        });
    },
    inputFoucs(){
      document.querySelector(".el-input__inner").removeAttribute("readonly")
      document.querySelector(".el-input__inner").focus()
    }
  },
};
</script>

<style scoped lang="less">
.select-group {
  background: #fff;
  padding: 10px 16px;
  font-size: 14px;
  color: #646566;
}
.select-group p {
  margin: 5px 0 8px;
}
.van-radio--horizontal {
  margin-bottom: 10px;
}
.name-select-group {
  display: flex;
  justify-content: space-between;
}
.name-select-group p {
  width: 110px;
  line-height: 24px;
  margin: 0;
}
.name-select-group /deep/ .el-input__inner {
  height: 24px;
  border: none;
  outline: none;
}
.inputMask{
  position: absolute;
  width: 75%;
  left: 20%;
  height: 30px;
  z-index: 999999999;
}
input {
    font-size: 1.6rem;
    height: 1.6rem;
    padding: 1rem 0;
}
.searchBox /deep/ .el-input__inner,
.searchBox /deep/ .el-input__icon{
  line-height: 24px !important;
}
</style>
